<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  *{
    padding: 0px;
    margin: 0px;
    list-style: none;
    bottom: 0;
    text-decoration: none;
  }
  body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .shell{
    width: 800px;
    height: 500px;
    position:relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 20px 30px 20px rgba(0,0,0, 0.25);
  }
  .images{
    width: 500%;
    height: 100%;
    display: flex;
    position: absolute;
    left:0;
    transition: 0.1s;
  }
  .img{
    width: 800px;
    height: 480px;
    background-image: cover;
  }
  .img:nth-child(1){
    background-image: url("../微信图片_20240514172222.jpg");
  }
  .img:nth-child(2){
    background-image: url("../微信图片_20240514172238(1).jpg");
  }
  .img:nth-child(3){
    background-image: url("../微信图片_20240514172246.jpg");
  }
  .img:nth-child(4){
    background-image: url("../微信图片_20240514172254.jpg");
  }
  .img:nth-child(5){
    background-image: url("../微信图片_20240514172300.jpg");
  }
 
  
  .min{
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    bottom: 40px;
    width: 30%;
    z-index: 999;
    left:50%;
    transform: translateX(-50%);
  }
  .m{
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 50%;
    border: solid rgba(255,255,255,0.5) 5px;
  }
  .button{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: space-between;
    user-select: none;
  }
  .button-left,
  .button-right{
    font-size: 50px;
    background-color: rgba(160,193,255,0.2);
    padding: 0 20px;
    cursor: pointer;
    line-height: 700px;
    color:#fff;
  }
</style>
<body>
  <div class="shell">
    <ul class="images">
      <li class="img"></li>
      <li class="img"></li>
      <li class="img"></li>
      <li class="img"></li>
      <li class="img"></li>
    
    </ul>
    <ul class="min">
      <li class="m"></li>
      <li class="m"></li>
      <li class="m"></li>
      <li class="m"></li>
      <li class="m"></li>
    

    </ul>
    <div class="button">
      <div class="button-left">&lt;</div>
      <div class="button-right">&gt;</div>
    </div>
  </div>
</body>
<script>
  let left = document.querySelector(".button-left")
  let right =document.querySelector(".button-right")
  let m =document.querySelector(".m")
  let images = document.querySelector(".images")
  //我们先设置一个index用来计算和控制图片位置，在设置一个time作为定时器
  let index = 0
  let time //在这里我们先创建一个position为复用分数，作为我是结合index未定义当前图片的位置的
  function position() {
    images.style.left=(index * -100)+"%"
  }
  function add(){
    if(index >=m.length - 1){
      index = 0
    }else{
      index++
    }
  }
  function desc(){
    if(index <1){
      index = m.length - 1
    }else{
      index--
    }
  }
  function timer(){
    time = setInterval(() =>{
      index++
      desc()
      add()
      position()
    },3000)
  }
  left.addEventListener("click",() =>{
    desc()
    position()
    clearInterval(time)
    timer()
  })
  right.addEventListener("click",()=>{
    add()
    position()
    clearInterval(time)
    timer()
  })
  for(let i = 0;i<=m.length;i++){
    m[i].addEventListener("click",()=>{
      index = i;
      position();
      clearInterval(time)
      timer()
    })
  }
  </script>
</html>